// pages/canvas/canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    angleData:10
  },
  /**
   * 生命周期函数--监听页面加载
   */
  drawCanvas:function(value){
    const context = wx.createCanvasContext('myCanvas', this);
    // 设置长方体的属性
    const x = 70; // 长方体左上角 x 坐标
    const y = 50; // 长方体左上角 y 坐标
    const width = 150; // 长方体宽度
    const height = 30; // 长方体高度
    const color = 'red'; // 长方体填充颜色
    const color1 = 'yellow'; // 长方体填充颜色
    console.log(context);
    // 绘制长方体
    const x1 = 200; // 长方体左上角 x 坐标
    const y1 = 50; // 长方体左上角 y 坐标
    context.setFillStyle(color);
    context.fillRect(x1, y1, width, height);
    const centerX = x + width;
    const centerY = y + height / 2;
    context.save();
    context.translate(centerX, centerY);
    const angle = -value* Math.PI / 180;
    context.rotate(angle);
    context.setFillStyle(color1);
    context.fillRect(-width , -height/2 , width, height);
    context.restore();
    context.draw();
  },
  dataChange(){
    // const angleData=50
    this.setData({
      angleData:this.data.angleData+10

    })
    this.drawCanvas(this.data.angleData)
  },
  onLoad(options) {
    this.drawCanvas(this.data.angleData)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.drawCanvas(this.data.angleData)
   
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})